<template>
	<view class="comment-page">
		<view class="order-title">订单号：{{ orderId }}</view>

		<view v-for="(order, orderIndex) in orders" class="order-block">
			<image :src="order.imgSrc" class="item-img"></image>
			<view class="item-info">
				<view class="item-comment">
					<textarea v-model="order.commit" placeholder="请输入评价内容"></textarea>
				</view>
				<uni-section title="请打分" type="line">
					<uni-data-select v-model="order.stars" :localdata="range"></uni-data-select>
				</uni-section>
			</view>
		</view>

		<button @click="submitComments">提交评价</button>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request'
	export default {
		data() {
			return {
				orderId: '',
				orders: [],
				range: [{
						value: 1,
						text: '1'
					},
					{
						value: 2,
						text: '2'
					},
					{
						value: 3,
						text: '3'
					},
					{
						value: 4,
						text: '4'
					},
					{
						value: 5,
						text: '5'
					},
				],

			}



		},
		methods: {

			async queryUserOrder() {

				const res = await request({
					url: 'orderUser/queryOrderByOrderId/' + this.orderId,
				})
				if (res.code == 200) {
					this.orders = res.data
				} else if (res.code == 201) {
					//跳转登录页
					uni.navigateTo({
						url: '/pages/login/login'
					})

				}
			},
			async submitComments() {

				// console.log(this.order[0].value)
				for (let i = 0; i < this.orders.length; i++) {
					//判断每一个是否打分
					if (this.orders[i].stars == undefined || this.orders[i].commit == null) {
						uni.showToast({
							title: '请打分',
							icon: 'none'
						})
						return
					}
				}



				const res = await request({
					url: 'orderUser/addComment',
					method: 'POST',
					data: {
						orders: this.orders,
						orderId: this.orderId
					}

				})
				if (res.code == 200) {
					uni.showToast({
						title: '评价成功',
						icon: 'none'
					})
					uni.navigateTo({
						url: '/pages/myOrders/myOrders'
					})
				} else if (res.code == 201) {
					//跳转登录页
					uni.navigateTo({
						url: '/pages/login/login'
					})

				}

			},

			onLoad(options) {
				console.log(options.orderId)
				this.orderId = options.orderId
				this.queryUserOrder()

			}
		},

	}
</script>

<style>
	.comment-page {
		padding: 20rpx;
	}

	.order-block {
		margin-bottom: 40rpx;
		border-bottom: 1px solid #eee;
	}

	.order-title {
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.item-block {
		display: flex;
		margin-bottom: 20rpx;
	}

	.item-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.item-info {
		flex: 1;
	}

	.item-name {
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}

	.item-comment textarea {
		width: 100%;
		min-height: 60rpx;
		border: 1px solid #ccc;
		border-radius: 6rpx;
		padding: 8rpx;
	}

	.star-group {
		margin-top: 8rpx;
	}

	.star-group text {
		font-size: 36rpx;
		margin-right: 4rpx;
		cursor: pointer;
	}
</style>